.app-wrapper {
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
}

.right-area {
  width: calc(100% - 300px);
  height: 100%;
}

.left-area {
  width: 300px;
  height: 100%;
  background: rgb(37, 37, 38);
}

.monaco-editor-wrapper {
  width: 100%;
  height: calc(100% - 301px);
}

.panel-wrapper {
  border-top: solid 1px rgb(64, 64, 64);
  width: 100%;
  height: 300px;
}

.tree-wrapper {
  width: 100%;
  height: calc(100% - 60px);
}

.workspace-wrapper {
  width: 100%;
  height: 60px;
  color: #ffffff;
  font-size: 16px;
  padding: 16px 16px;
}

.loader-line {
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: #ddd;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.loader-line:before {
  content: "";
  position: absolute;
  left: -50%;
  height: 3px;
  width: 40%;
  background-color: coral;
  -webkit-animation: lineAnim 1s linear infinite;
  -moz-animation: lineAnim 1s linear infinite;
  animation: lineAnim 1s linear infinite;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

@keyframes lineAnim {
  0% {
      left: -40%;
  }
  50% {
      left: 20%;
      width: 80%;
  }
  100% {
      left: 100%;
      width: 100%;
  }
}

.workspace-wrapper :global(.next-select) {
  margin-left: 12px;
}

.workspace-wrapper :global(.next-select .next-input), :global(.next-select input) {
  background: transparent;
  border: none;
  color: #ffffff !important;
}

:global(.terminal) {
  height: 100%;
  padding-left: 12px;
  padding-top: 12px;
}

.app-wrapper :global(.next-tree.next-node-block .next-tree-node-inner) {
  background-color: transparent;
  color: #ffffff;
}

.app-wrapper :global(.next-tree.next-node-block .next-tree-node-inner:hover),
.app-wrapper :global(.next-tree.next-node-block .next-tree-node-inner:focus) {
  background-color: rgb(43, 45, 46);
  color: #ffffff;
}

.app-wrapper :global(.next-tree.next-node-block .next-tree-node-inner.next-selected) {
  background-color: rgb(55, 55, 60);
  color: #ffffff;
}

.app-wrapper :global(.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon) {
  color: #ffffff;
}
